<script setup lang='ts'>
import { menuStore } from '@/store/menu';
import { computed } from 'vue';

defineProps(['listParam'])

const mStore = menuStore()
const screenIsBig = computed(() => {
    return mStore.getScreenIsBig
})

const emit = defineEmits(['sizeChange', 'currentChange'])

// 页容量改变时触发
const sizeChange = (size: number) => {
    emit('sizeChange', size)
}
// 页数改变时触发
const currentChange = (page: number) => {
    emit('currentChange', page)
}

</script>
<template>
    <div class="pagination">
        <el-pagination v-if="screenIsBig" @size-change="sizeChange" @current-change="currentChange"
            :current-page.sync="listParam.current_page" :page-sizes="[20, 40, 80, 100]" :page-size="listParam.page_size"
            layout="total, sizes, prev, pager, next, jumper" :total="listParam.total" background>
        </el-pagination>
        <el-pagination v-else background layout="prev, pager, next" @current-change="currentChange"
            :page-size="listParam.page_size" :total="listParam.total" />
    </div>
</template>